<template>
    <div class="ts">
        <div class="ts-filter">
            <el-form :inline="true" class="demo-form-inline">
                <el-form-item label="日期" style="flex: 1;">
                    <el-date-picker v-model="day" type="month" placeholder="Pick a day" @change="change" />
                </el-form-item>

                <el-form-item style="flex: 1;">

                    <el-input placeholder="请输入关键字" v-model="teachername">
                        <template #prepend>
                            <el-select placeholder="姓名" style="width: 115px">
                                <el-option label="姓名" value="1" />
                            </el-select>
                        </template>
                    </el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="ts-list">
            <div class="ts-list-table">
                <el-table :data="teacherSort" border style="width: 100%; max-height: 350px; font-size: 10px;">
                    <el-table-column label="序号" width="80">
                        <template #default="scope">
                            {{ scope.$index + 1 }}
                        </template>
                    </el-table-column>
                    <el-table-column label="姓名">
                        <template #default="scope">
                            {{ scope.row.teacher }}
                        </template>
                    </el-table-column>
                    <el-table-column label="合计">
                        <template #default="scope">
                            {{ scope.row.messageNumber[1].num + scope.row.messageNumber[0].num +
                                scope.row.messageNumber[3].num +
                                scope.row.messageNumber[4].num +
                                scope.row.messageNumber[2].num + photosNum + noticeNum + evaluateNum }}
                        </template>
                    </el-table-column>
                    <el-table-column label="收假通知">
                        <template #default="scope">
                            {{ scope.row.messageNumber
                            [1].num }}
                        </template>
                    </el-table-column>
                    <el-table-column label="放假通知">
                        <template #default="scope">
                            {{ scope.row.messageNumber[0].num }}
                        </template>
                    </el-table-column>
                    <el-table-column label="活动通知">
                        <template #default="scope">
                            {{ scope.row.messageNumber[3].num }}
                        </template>
                    </el-table-column>
                    <el-table-column label="考试通知">
                        <template #default="scope">
                            {{ scope.row.messageNumber[4].num }}
                        </template>
                    </el-table-column>
                    <el-table-column label="选课通知">
                        <template #default="scope">
                            {{ scope.row.messageNumber[2].num }}
                        </template>
                    </el-table-column>
                    <el-table-column label="相册数量">
                        <template #default="scope">
                            {{ photosNum }}
                        </template>
                    </el-table-column>
                    <el-table-column v-model="noticeNum" label="通知数量">
                        <template #default="scope">
                            {{ noticeNum }}
                        </template>
                    </el-table-column>
                    <el-table-column v-model="evaluateNum" label="评价数量">
                        <template #default="scope">
                            {{ evaluateNum }}
                        </template>
                    </el-table-column>

                </el-table>
            </div>
        </div>
    </div>
</template>

<script  setup lang="ts">
import server from '@/api/index';
import { reactive, toRefs, onMounted, ref } from 'vue'
let teacherSort = ref([])
let day = ref()
let teachername = ref()

let photosNum = ref()
let noticeNum = ref()
let evaluateNum = ref()

var xi: any
onMounted(async () => {
    day.value = '2023-3'
    // console.log(day.value);

    var rew = await server.zcg.messageStatistics_teacherMsgNum({ year: 2023, month: 5 })
    teacherSort.value = rew.data.data
    // console.log(rew.data.data);
    xi = rew.data.data

    var rew = await server.zcg.messageStatistics_photosNum({ year: 2023, month: 5 })
    photosNum.value = rew.data.data

    var rew = await server.zcg.messageStatistics_noticeNum({ year: 2023, month: 5 })
    noticeNum.value = rew.data.data

    var rew = await server.zcg.messageStatistics_evaluateNum({ year: 2023, month: 5 })
    evaluateNum.value = rew.data.data
    // console.log(rew.data.data);

})

var change = async () => {
    var month = day.value.getMonth() + 1
    var year = day.value.getFullYear()
    // console.log(day.value.getMonth() + 1);
    // console.log(day.value.getFullYear());
    var rew = await server.zcg.messageStatistics_teacherMsgNum({ year, month })
    teacherSort.value = rew.data.data
    // console.log(rew.data.data);
    xi = rew.data.data

    var rew = await server.zcg.messageStatistics_photosNum({ year, month })
    photosNum.value = rew.data.data

    var rew = await server.zcg.messageStatistics_noticeNum({ year, month })
    noticeNum.value = rew.data.data

    var rew = await server.zcg.messageStatistics_evaluateNum({ year, month })
    evaluateNum.value = rew.data.data
    // console.log(rew.data.data);
}

var onSubmit = () => {
    var ex: any = JSON.parse(JSON.stringify(xi))
    // console.log(ex);
    teacherSort.value = ex.filter((item: any) => item[0].teacher.includes(teachername.value))
}



</script>

<style  scoped lang="scss">
.ts {
    width: 100%;
    background: #fff;

    .ts-filter {
        width: 85%;
        height: 115px;
        display: flex;
        justify-content: start;
        align-items: center;
        padding: 20px 20px 0;
        position: relative;
    }

    .ts-list {
        height: 430px;
        padding: 0 20px 0px;

        .ts-list-fenye {
            margin-top: 15px;
            display: flex;
            justify-content: end;
        }
    }

}
</style>